import React from 'react'
import { Toast, NavBar ,ActionBar ,Swiper,Image  } from 'react-vant';
import { CartO, ChatO, Star } from '@react-vant/icons';
import widthRoute from '../Utils/widthRoute';
import { useSelector ,useDispatch} from 'react-redux';
import { STORETYPE ,PROPSTYPE,SHOPLIST,LOVELIST } from '../Type/Store.d';



function Detail(route:any) {
    // route.route.Navigate / Params
    const Dispatch = useDispatch();
    const childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    const obj = childrenList.find(item=>item.id == route.route.Params.id) as PROPSTYPE;
    console.log(obj,'---obj');
    
    return (
        <div className='Detail'>
            <NavBar
                title="商品详情"
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => route.route.Navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />
            <main>
                <div className="demo-swiper">
                    <Swiper autoplay={2000} loop={true}>
                        {
                            (obj.img as string[]).map((item,index)=>{
                                return <Swiper.Item key={index}>
                                    <Image  src={item} alt=""width="100%" height="320" />
                                </Swiper.Item>
                            })
                        }
                    </Swiper>
                </div>
                {/* ，详情页正确考虑接收数据为富文本时如何展示 */}
                <div dangerouslySetInnerHTML={{__html:`<h1>￥${obj.price}.00</h1>
                    <h3>${obj.txt}</h3>
                    <p>详情介绍:<br/>${obj.con}</p>`}}>
                </div>
            </main>
            <footer>
            <ActionBar>
                <ActionBar.Icon icon={<ChatO color="red" />} text="客服" />
                <ActionBar.Icon icon={<CartO color="red" />} badge={{ content: useSelector((state:STORETYPE)=>state.ShopList.length) }} text="购物车" onClick={()=>{
                    route.route.Navigate('/Home/Shop')
                }}/>
                <ActionBar.Icon icon={<Star color={obj.flag ? 'red' : '#000'} />} text={obj.flag ? '已收藏' : '未收藏'} onClick={()=>{
                    Dispatch({
                        type:LOVELIST,
                        payload:obj
                    })
                }}/>
                {/* 8.底部展示个购物车按钮，角标为当前商品的数量，点击加入购物车数量变化，且正确加入到购物车内 */}
                <ActionBar.Button type="warning" text="加入购物车" onClick={()=>{
                    Dispatch({
                        type:SHOPLIST,
                        payload:obj
                    })
                    Toast('加入成功')
                }}/>
                <ActionBar.Button type="danger" text="立即购买" />
            </ActionBar>
            </footer>
        </div>
    )
}

export default widthRoute(Detail)